<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    article{
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-rows: 80px 1fr 80px;
        grid-template-columns: 100px 1fr;
        grid-template-areas: "header header" "nav main" "footer footer";
    }
    header,nav,main,footer{
        background: lightgray;
        border: 1px solid yellow;
    }
    header{
        grid-area: header;
    }
    nav{
        grid-area: nav;
    }
    main{
        grid-area: main;
    }
    footer{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-area: footer;
    }
    footer div{
        background: wheat;
        border: 1px solid white;
        text-align: center;
    }
    footer img{
        margin: 0 auto;
        display: block;
        width: 3em;
    }
</style>
<body>
<article>
    <header></header>
    <nav></nav>
    <main></main>
    <footer>
        <div><img src="images/home.png" alt=""><a href="">首页</a></div>
        <div><img src="images/shop.png" alt=""><a href="">店铺</a></div>
        <div><img src="images/ShoppingCart.png" alt=""><a href="">购物车</a></div>
        <div><img src="images/mine.png" alt=""><a href="">我的</a></div>
    </footer>
</article>
</body>
</html>